<template>
	<view class="home">
		<u-sticky bgColor="#fff">
			<u-tabs :list="list" lineWidth="20" lineHeight="7" :lineColor="`url(${lineBg}) 100% 100%`" :activeStyle="{
		        color: '#303133',
		        fontWeight: 'bold',
		        transform: 'scale(1.05)'
		    }" :inactiveStyle="{
		        color: '#888888',
		        transform: 'scale(1)'
		    }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @click="changeTab">
			</u-tabs>
		</u-sticky>

		<view class="LoadingState" v-if="LoadingState">
			<view class="loaditem" v-for="(item,index) in 3" :key="index">
				<u-skeleton rows="8" title loading avatar>
				</u-skeleton>
			</view>
		</view>

		<view class="content">
			<view class="item" v-for="(item,index) in dataList" :key="index">
				<view @click="goDetail(item)">
					<blog-item :item="item" @delEvent="delStatus"></blog-item>
				</view>
			</view>
		</view>

		<view>
			<uni-load-more :status="uniload"></uni-load-more>
		</view>

		<view class="edit" @click="gotoPub">
			<text class="iconfont icon-bianji-copy"></text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'

	import {
		store
	} from '../../uni_modules/uni-id-pages/common/store.js'

	const lineBg =
		"";

	const uniload = ref('more')
	const list = [{
		name: '最新',
		type: 'publish_date'
	}, {
		name: '热门',
		type: 'view_count'
	}]

	const type = ref()

	const db = uniCloud.database()

	const dataList = ref([])

	const LoadingState = ref(false)

	const changeTab = (e) => {
		LoadingState.value = true
		uniload.value = 'more'
		type.value = e.type
		loadData(e.type)
	}

	const delStatus = (blog) => {
		dataList.value.forEach((item, index) => {
			if (item._id === blog._id) {
				dataList.value.splice(index, 1)
			}
		})
	}

	const gotoPub = () => {
		uni.navigateTo({
			url: '../../pages/publish/publish'
		})
	}

	onReachBottom(() => {
		if (uniload.value !== 'noMore') {
			uniload.value = 'loading'
			loadData(type.value)
		}
	})

	const loadData = async (condition) => {
		const blogTmp = db.collection('blog').where('delStatus != true').field(
				'title,user_id,description,picurls,like_count,view_count,comment_count,publish_date,delStatus')
			.getTemp()
		const userTmp = db.collection('uni-id-users').field('_id,username,nickname,avatar_file').getTemp()
		const res = await db.collection(blogTmp, userTmp).orderBy(`${condition}`, 'desc').skip(dataList.value
			.length).limit(5).get()
		if (res.result.data.length < 5) {
			uniload.value = 'noMore'
		}

		dataList.value = [...dataList.value, ...res.result.data]

		if (store.hasLogin) {
			let idArr = [];
			dataList.value.forEach((item) => {
				idArr.push(item._id)
			})
			const likeRes = await db.collection('blog-like').where({
				article_id: db.command.in(idArr),
				user_id: uniCloud.getCurrentUserInfo().uid
			}).get()

			likeRes.result.data.forEach((item) => {
				let findIndex = dataList.value.findIndex(find => {
					return item.article_id == find._id
				})
				dataList.value[findIndex].isLike = true;
			})
		}

		if (res) {
			LoadingState.value = false
		}
	}

	const goDetail = (item) => {
		item.view_count++
		uni.navigateTo({
			url: `../../pages/detail/detail?id=${item._id}`,
			events: {
				changelike: (res) => {
					item.like_count = item.like_count + res
					res === 1 ? item.isLike = true : item.isLike = false
				},
				changecomment: (res) => {
					item.comment_count = item.comment_count + res
				}
			}
		})
	}

	onLoad(() => {
		LoadingState.value = true
		loadData(list[0].type)
	})
</script>

<style scoped lang="scss">
	.home {
		margin: 0 10rpx;

		.edit {
			width: 100rpx;
			height: 100rpx;
			background-color: #2ac2d1;
			display: flex;
			border-radius: 50%;
			position: fixed;
			right: 50rpx;
			bottom: var(--window-bottom);
			margin-bottom: 50rpx;
			box-shadow: 0 0 10rpx skyblue;

			text {
				margin: auto;
				font-size: 60rpx;
				color: #fff;
			}

			&:active {
				transform: scale(0.95);
			}
		}

		.content {
			margin: 10rpx;

			.item {
				padding: 30rpx 10rpx;
				margin: 15rpx 0;
				box-shadow: 0 0 5rpx #d7d6e2;
				border-radius: 15rpx
			}
		}

		.LoadingState {
			height: 100vh;
			display: flex;
			flex-direction: column;

			.loaditem {
				margin: 30rpx 0;
			}
		}
	}
</style>